<template>
  <div class="mobile-popup-actions">
    <van-popup v-model:show="actions" position="bottom" round :style="{ height: '80%' }">
      <div class="content p-2 w-full h-full box-border flex yu-bgColor-tew-only flex-col">
        <div class="header flex items-center h-20">
          <div class="w-15 h-15 mr-2">
            <!--            <img class="w-full h-full" :src="songUrlInfo?.al?.picUrl" alt="">-->
            <img class="w-full h-full" :src="mobilePopupImg(songUrlInfo)"
                 alt="">
          </div>
          <span class="flex flex-col">
            <span class="w-65 truncate">
              <span>{{ songUrlInfo?.al?.name ? songUrlInfo?.al?.name : songUrlInfo.name }}</span>
              <span v-if="isMobileSinger && songUrlInfo?.alia?.length > 0" class="text-xs text-gray"> - ({{ songUrlInfo.alia[0] }})</span>
            </span>
            <span class="text-xs yu-titleColor" v-if="isMobileSinger">
              <span class="mr-1" v-for="ar in songUrlInfo?.ar">
                {{ ar.name }}
              </span>
            </span>
            <span v-if="store.currentInfo.type === 6" @click="jumpAlbum(songUrlInfo?.album?.id)" class="yu-textColor-active mt-1">{{ songUrlInfo?.album?.name }}</span>
          </span>
        </div>
        <div class="actions flex-1">
          <ul>
            <li @click="playerMusic(isRadio(songUrlInfo, 'id'))">
              <span class=" i-mdi-play-circle-outline inline-block"/>
              <span class="ml-2">播放</span>
            </li>
            <li @click="addMyPlaylist(songUrlInfo.id)" v-if="isAddPlayList">
              <van-icon class-prefix="i-mdi-pencil-plus"/>
              <span class="ml-2">收藏歌单</span>
            </li>
            <li @click="downloadUrl(songUrlInfo)" v-if="isDownload">
              <span class="inline-block i-mdi-download"/>
              <span class="ml-2">下载音乐</span>
            </li>
            <li @click="shareMusicPopup(songUrlInfo)" v-if="isShare">
              <span class="inline-block i-mdi-share mr-2"/>
              <span class="ml-2">分享</span>
            </li>
            <li @click="additionalSongs(isRadio(songUrlInfo, 'id'))" v-if="isAddPlaylist">
              <span class="i-mdi-shape-rectangle-plus"/>
              <span class="ml-2">添加到播放列表</span>
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useStore} from "@/store/index"
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()
const actions = ref(false)

// 判断是否是电台
const isRadio = (params, info) => {
  if (store.currentInfo.type === 5) {
    return params.mainSong[info]
  } else {
    return params[info]
  }
}

defineProps({
  songUrlInfo: Object,
  // 是否显示分享
  isShare: {
    type: Boolean,
    default: true
  },
  // 是否显示添加到播放列表
  isAddPlaylist: {
    type: Boolean,
    default: true
  },
  // 是否显示下载按钮
  isDownload: {
    type: Boolean,
    default: true
  },
  // 是否显示添加到我的歌单
  isAddPlayList: {
    type: Boolean,
    default: true
  },
  // 是否显示歌手
  isMobileSinger: {
    type: Boolean,
    default: true
  },
  // 是否显示播放数量
  isRadioPlayNum: {
    type: Boolean,
    default: false
  }
})

const $emit = defineEmits(['playerMusic', 'addMyPlaylist', 'downloadUrl', 'shareMusicPopup', 'additionalSongs'])
// 播放音乐
const playerMusic = (id) => {
  $emit('playerMusic', id)
}
// 收藏歌单
const addMyPlaylist = (id) => {
  $emit('addMyPlaylist', id)
}
// 下载音乐
const downloadUrl = (songUrlInfo) => {
  $emit('downloadUrl', songUrlInfo)
}

// 分享
const shareMusicPopup = (songUrlInfo) => {
  $emit('shareMusicPopup', songUrlInfo)
}

// 添加到播放列表
const additionalSongs = (id) => {
  $emit('additionalSongs', id)
}


// 处理移动端点击展示操作按钮
const mobilePopupImg = (songUrlInfo) => {
  switch (store.currentInfo.type) {
    case 6:
      return songUrlInfo?.album?.blurPicUrl
    default:
      return songUrlInfo?.al?.picUrl ? songUrlInfo?.al?.picUrl : songUrlInfo.coverUrl
  }
}

// 点击专辑跳转到专辑页面
const jumpAlbum = (id) => {
  router.push({
    path: '/collection-detail',
    query: {
      id
    }
  })
}


defineExpose({
  actions
})
</script>

<style scoped lang="scss">
ul {
  li {
    display: flex;
    align-items: center;
    height: 48px;
  }
}
</style>
